<template>
	<view class="find-page">

		<scroll-view scroll-y class="body" lower-threshold="10">
			<!-- 轮播图 -->
			<view class='swiper-container'>
				<swiper class='screen-swiper round-dot' :indicator-dots="true" :autoplay="true" :interval="3000"
					:duration="1000" circular>
					<swiper-item v-for="(item,index) in lunbo" :key="index" @click="goToDetail(item._id)">
						<image mode="aspectFill" :src="item.cover" class="imgItem"></image>
					</swiper-item>

				</swiper>
			</view>

			<!-- 文章部分 -->
			<view class="content">
				<!-- 文章item -->
				<article-item :article="item" v-for="(item,index) in swiperList" :key="index" />
			</view>
		</scroll-view>
		<image class="fixed-image" @tap="gotoEditor" src="../../static/writeArticle.png"></image>
	</view>
</template>

<script>
	import articleItem from '../../components/article-item/article-item.vue'
	const db = wx.cloud.database();
	const _ = wx.cloud.database().command;
	export default {
		components: {
			articleItem
		},
		data() {
			return {
				swiperList: [],
				lunbo: [],
			}

		},

		methods: {
			gotoEditor() {
				//转跳进编辑页面
				uni.navigateTo({
					url: "./editor/editor"
				})
			},

			// 初始化获取文章和轮播图数据
			getListInfo() {
				db.collection("article").get().then(res => {
					this.swiperList = res.data;
				})
				db.collection("article").limit(4).get().then(res => {
					this.lunbo = res.data;
				})
			},
			goToDetail(id) {
				console.log(id);
				db.collection("article").where({
					_id: id
				}).update({
					data: {
						view: _.inc(1)
					}
				}).then(res => {
					console.log(res)
				}).catch(err => {
					console.log(err)
				})
				wx.navigateTo({
					url: '/pages/info/detail/detail?id=' + id
				});
			},
		},
		onShow() {
			db.collection("article").get().then(res => {
				this.swiperList = res.data;
			})
			db.collection("article").limit(4).get().then(res => {
				this.lunbo = res.data;
			})
		},
		created() {
			this.getListInfo()
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.getListInfo()
				uni.stopPullDownRefresh()
			}, 2000)

		},
	}
</script>

<style scoped>
	.swiper-container {
		margin: 30upx;
		border-radius: 20upx;
		overflow: hidden;
	}

	.body {
		background-color: #FFFFFF;
		width: 100%;
		height: 100%;
	}

	.fixed-image {
		position: fixed;
		bottom: 40rpx;
		right: 40rpx;
		width: 100rpx;
		height: 100rpx;
	}
</style>
